/* eslint-disable no-prototype-builtins */
<template>
  <div class="users_box">丁普成
    <el-card>
      <el-row style="margin-bottom: 20px;">
        <el-col :span=24>
          <el-button type="success" icon="el-icon-edit" class="filter-item fr" size="small" @click="showMenuForm">添加菜单
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="listLoading" :border="false" :data="menuList" highlight-current-row default-expand-all
        style="width: 100%" row-key="id" lazy :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
        <el-table-column label="标题" width="250px">
          <template v-slot="{row}">
            <i class="el-icon-folder-opened" v-if="row.level===1"></i>
            <i class="ivu-icon fa fa-file-o fa-fw" v-else-if="row.level===3"></i>
            <i class="el-icon-view" v-else-if="row.level===5"></i>
            <i class="el-icon-view" v-else></i>
            <span>{{row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限点代码" width="900px" prop="code"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button type="primary" plain icon="el-icon-edit" circle @click="editMenuForm(row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle @click="remove(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <MenuAdd ref="MenuAddRef" :text="title.text" :pageTitle="title.pageTitle"
      :PermissionGroupsList="PermissionGroupsList" @handleCloseModal="handleCloseModal" @newDataes="newDataes">
    </MenuAdd>
  </div>
</template>

<script>
import { list, remove } from '../../api/base/menus'
import MenuAdd from '../components/menu-add.vue'
export default {
  components: {
    MenuAdd
  },
  data () {
    return {
      // 在接口为请求到数据之前，显示加载中，直到请求到数据后消失
      listLoading: false,
      // 菜单的数据列表
      menuList: [],
      title: {
        text: '',
        pageTitle: '菜单'
      },
      PermissionGroupsList: []
    }
  },

  created () {
    this.getMenuList()
  },

  methods: {
    // 删除功能
    remove (row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        console.log(res)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功!')
        this.getMenuList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 刷新页面
    newDataes () {
      this.getMenuList()
    },
    // 关闭窗口
    handleCloseModal () {
      this.$refs.MenuAddRef.dialogFormH()
    },
    // 展示编辑菜单
    editMenuForm (row) {
      this.title.text = '编辑'
      const flag = row.is_point ? 'points' : 'menu'
      this.$refs.MenuAddRef.changeType(flag)
      this.$refs.MenuAddRef.dialogFormV()
      // 渲染编辑数据
      this.$refs.MenuAddRef.hanldeEditForm(row.id)
    },
    // 展示添加菜单
    showMenuForm () {
      this.title.text = '创建'
      this.$refs.MenuAddRef.handleResetForm()
      this.$refs.MenuAddRef.dialogFormV()
    },
    // 获取列表数据
    async getMenuList () {
      this.listLoading = true
      const res = await list()
      console.log(res)
      if (res.status !== 200) return this.$message.error('获取数据失败')
      // this.$message.success('获取数据成功')
      // 利用递归函数深拷贝数据，并改变key=points为key=childs
      function deepCopy (source, level) {
        if (typeof source !== 'object' || source === null) return source
        const target = Array.isArray(source) ? [] : {}
        target.level = level
        for (const k in source) {
          if (source.hasOwnProperty(k)) {
            if (k === 'points') {
              target.childs = deepCopy(source[k], level + 1)
            } else {
              target[k] = deepCopy(source[k], level + 1)
            }
          }
        }
        return target
      }
      const res2 = deepCopy(res.data, 0)
      console.log(res2)
      // res.data.forEach(item => {
      //   item.iconnum = 0
      //   item.childs && item.childs.forEach(item => {
      //     item.iconnum = 1
      //     // item.childs = item.points
      //     item.childs && item.childs.forEach(item => {
      //       item.iconnum = 2
      //     })
      //   })
      // })
      this.menuList = res2
      this.listLoading = false
      console.log(this.menuList)
    }
  }
}
</script>

<style scoped lang='less'>
.users_box {
  margin: 20px 20px;
}
/deep/ .el-icon-arrow-right {
  display: none;
}
</style>
